<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 改变背景颜色 */
			body{background:burlywood;}
			.box{
				background: #fff;
				padding: 20px 30px;
				width: 400px;
				margin: 0 auto;
				text-align: center;
			}
			.btn{
				width: 180PX;
				height: 40PX;
				background: #3388FF;
				border: 1PX solid #FFF;
				color: #fff;
				font-size: 14px;
			}
			.ipt{width: 260px; padding: 4px 2px;}
			.tips{
				width: 400px;
				height: 30px;
				margin: 5px auto;
				background: #fff;
				color: red;
				border: 1px solid #ccc;
				display: none;
				line-height: 30px;
				padding-left: 20px;
				font-size: 13px;
			}
			
		</style>
	</head>
	<body>
		<div id="tips" class="tips"></div>
		<div class="box">
			<p><label>账号：<input id="user" class="ipt" type="text"></label></p>
			<p><label>密码：<input id="pass" class="ipt" type="password"></label></p>
			<p><button id="login" class="btn">登录</button></p>
		</div>
		<script>
			var user=document.getElementById('user');
			var pass=document.getElementById('pass');
			var tips=document.getElementById('tips');
			//blur 失去焦点 focus 获取焦点
			user.onblur=showTips;
			pass.onblur=showTips;
			
			function showTips(e){
				//console.log(e);
				var el=e.target;
				if(el.value==""){
				//if(el.innerHTML==""){
					tips.style.display="block";
					tips.innerHTML="账号或密码错误";
					
				}else{
					tips.style.display="none";
				}
				
			}
		</script>
	</body>
</html>
